<!DOCTYPE html>
<html>

<head>
  <style>
    #app {
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="main" style="width: 600px; height: 400px;"></div>
  </div>
</body>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./node_modules/echarts/dist/echarts.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        monthData: []
      }
    },
    methods: {
      echartsInit() {
        this.$nextTick(() => {
          let url = "http://47.109.43.54:9000/api/report/month"
          axios.get(url).then(res => {
            console.log(res.data);
            this.monthData = res.data
            // const chartContainer = ;
            let myChart = echarts.init(document.getElementById("main"));

            const options = {
              xAxis: {
                type: 'category',
                data: this.monthData.map(item => item.name)
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                type: 'bar',
                data: this.monthData
              }]
            };
            myChart.setOption(options);
          }).catch(err => {
            console.log(err);
          })
        })

      }
    },
    mounted() {
      this.echartsInit()
    }
  });
</script>

</html>